<template>
  <!-- 收到的消息 -->
  <div class="Bian">
    <el-container class="shoudao">
      <el-header class="sousoud" style="height:40px">
        <el-button  plain type="danger" @click="dels()">删除选中</el-button>

    </el-header>

      <el-main class="maind">

<!--        <div class="diveven">-->


<!-- -->
<!--          <div class="fortr" @click="btn_user(item)" v-for="item in datas" :key="item.value">-->

<!--              <span>-->
<!--                <tr>-->
<!--                  <td>-->
<!--                           <el-image-->
<!--                             style="width: 50px; height: 50px"-->
<!--                             :src="item.photoPath"></el-image>-->
<!--                  </td>-->
<!--                </tr>-->
<!--              </span>-->
<!--            <span class="namespan">-->
<!--                <tr>-->
<!--                  <td>-->

<!--                   <strong class="smMai"> <small>来自：</small>{{item.creatorName}}</strong>-->
<!--                    <small class="times">({{item.created}})</small>-->
<!--                  </td>-->
<!--                </tr>-->
<!--                <tr>-->

<!--                  <td>-->
<!--                    <a href="#">{{item.mailTitle}}</a>-->
<!--                  </td>-->
<!--                </tr>-->

<!--              </span>-->

<!--          </div>-->
<!--        </div>-->

        <el-table
          ref="multipleTable"
          :data="datas"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>

          <el-table-column
            width="55"
            label="头像">
            <el-image
              style="width: 50px; height: 50px"
              :src=datas.photoPath
              ></el-image>
          </el-table-column>


          <el-table-column
            label="标题"
            width="120">
            <template slot-scope="scope"><el-link>{{ scope.row.mailTitle }}</el-link></template>
          </el-table-column>

          <el-table-column
            prop="creatorName"
            label="来自"
            show-overflow-tooltip>
          </el-table-column>


          <el-table-column
            prop="created"
            label="时间"
            width="200">
          </el-table-column>



        </el-table>
      </el-main>
      <el-footer>
        <div class="chaspan">


          <div class="block">

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage2"
              :page-sizes="[1, 5, 10, 20]"
              :page-size="100"
              layout="sizes, prev, pager, next"
              :total="Fenlongs"
            ></el-pagination>
          </div>

        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  // SelectShou
  import xinxiGli from "@/api/xiaoxi/xiaoxi";

  export default {
    name: "",
    data() {
      return {
        imgurl: '',
        datas: [],
        FaChuAll: [],
        i: 0,
        ids: [],

        currentPage2: 2,

        //总长度
        Fenlongs: 0,
        //分页数据
        user: {pageIndex: 1, pageSize: 5}
      };
    },
    created() {
      this.SelectShoudao();
    },
    methods: {

      //复选框事件
      handleSelectionChange(val) {
        this.ids = []
        for (const i of val){
          this.ids.push(i.mailId)
        }
        console.log(this.ids)


      },

      //查询收到的消息
      SelectShoudao() {
        xinxiGli.SelectShou().then(res => {
          this.FaChuAll = res.records;

          this.datas = this.FaChuAll;

          console.log(res.records)
          // console.log("1235555"+this.imgurl)
        });
      },



      //删除选中
      dels() {
        xinxiGli
          .xiaoxidel(this.ids)
          .then(res => {
            console.log("删除成功")
          })

        this.SelectShoudao();
      },

      //每页几条
      handleSizeChange(val) {
        this.user.pageSize = val;
        console.log(`每页 ${this.user.pageSize} 条`);
        this.SelectFasongFen()
      },

      //当前页
      handleCurrentChange(val) {
        this.user.pageIndex = val;
        console.log(`当前页: ${this.user.pageIndex}`);
        this.SelectFasongFen()
      },

      //分页查询
      SelectFasongFen() {
        xinxiGli.SelectShouFen(this.user).then(res => {
          this.FaChuAll = res;
          console.log(this.FaChuAll);
          this.datas = this.FaChuAll.records;
          this.Fenlongs = this.FaChuAll.total
        });


      }


    }
  };
</script>

<style scoped lang="scss">



  .times{
    margin-left: 82%;
  }
  .namespan{
    display:inline-block;

  }
  .namespan tr:nth-child(1) td{
    padding-bottom: 15px;

  }

  .namespan tr:nth-child(2){
    background-color: #F3F9FE;
    /*border-radius: 10px;*/
    /*border: 1px solid rgba(155, 153, 153, 0.432);*/
    padding-left: 20px;
  }

  .namespan tr:nth-child(3){
    background-color: #F3F9FE; border-radius: 5px;

  }

  .fortr span:nth-child(2){
    width: 100%;
  }
  .namespan tr td {
    display: inline-block;
    width: 100%;
  }


  .fortr span:nth-child(2) tr:nth-child(2) td {
    padding-top: 10px;
    font-size: 15px;
    height: 70px;
    width: 100%;
  }

  .smMai {
    color: #666666;
    font-size: 13px;
  }

  .fortr {
    display: flex;
    padding-top: 6px;

  }

  .fortr span {
    margin-right: 10px;
  }


  .fortr span tr {
    display: inline-block;
    margin-top: 2px;
    width: 100%;

  }

  .el-icon-s-opportunity {
    font-size: 40px;
  }

  .maind {
    overflow: scroll;
    height: 600px;
  }

  .shoudao .el-footer {
    width: 100%;
    padding: 0;
  }

  // 这是收到
  .maind {
    overflow: scroll;
    height: 600px;
  }

  tr td {
    font-size: 12px;
    color: rgb(30,137,250);
  }

  .shoudao .chaspan .el-button-group {
    background-color: white;
    margin: 2px;
  }

  .shoudao .chaspan .el-button-group .el-button {
    width: 15px;
    border: 1px solid rgba(170, 170, 170, 0.247);
    background-color: white;
    color: #000;
  }

  .shoudao .chaspan {
    display: flex;
    justify-content: center;
    /*background-color: rgb(242, 242, 242);*/
  }

  .shoudao .chaspan span {
    display: flex;
  }

  .namespan strong{
    display: inline-block;
    width: 100px;
  }

  .shoudao .chaspan small {
    margin-top: 10px;
  }

  .shoudao .chaspan span input {
    width: 30px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .shoudao .chaspan span .el-select {
    width: 65px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .shoudao .fortr {
    /*border: 1px solid rgb(192, 192, 192);*/
    height: 80px;
    margin-top: 10px;
  }

  .diveven {
    /*border: 1px solid rgba(104, 99, 99, 0.24);*/
    padding: 10px;

  }

  .shoudao .diveven .fortr {
    border: 1px solid #EEEEEE;
    height: 130px;
  }

  .fortrB {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
  }



  .shoudao .shoudao > .el-header {
    background-color: rgb(242, 242, 242);
    border: 1px solid rgb(192, 192, 192);
  }

  .shoudao .roa .el-col:nth-child(1) {
    text-align: right;
    margin-top: 12px;
    font-size: 12px;
  }

  .shoudao .el-input {
    width: 200px;
  }

  // 收到底部
</style>
